<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" auto-show-back-to-top>

		<template #top>
			<view class="top">

				<searchs />
			</view>

			<view class="tabs xflex-x-around xpb24">
				<view class="tabsItem xflex-x" v-for="(item,index) in detail.typelist" :key="index">
					<view class="tabsItemname" @click="onTypeActive(index)"
						:class="detail.typeActive == index +1?'tabsItemnameActive':''">
						
						{{item.name}}
					</view>

				</view>



			</view>
		</template>

		<view class="">

			<view class="goods xp32 xbs">
				<view class="goodsItem pr" @click="ontwoTypeActive(index)" v-for="(item,index) in detail.twoTypeList"
					:key="index">
					<image class="goodsImg " :src="detail.img" mode=""></image>
					<view class="goodsinfo pa xflex-y-center">
						<view class="goodsTitle" :class="index == detail.twoTypeActive ?'color':''" v-if="item.id!=0">
							{{detail.title}}

						</view>

						<view class="goodsTitle" :class="index == detail.twoTypeActive ?'color':''" v-if="item.id ==0">
							全部
						</view>

						<view class="goodsValue" :class="index == detail.twoTypeActive ?'color':''">
							{{item.name}}

						</view>
					</view>
				</view>

			</view>



			<view class="">
				<u-divider v-if="detail.twoTypeActive !=0"
					:text="`${detail.title}(${detail.twoTypeList[detail.twoTypeActive].name})`"
					:hairline="true"></u-divider>
				<u-divider v-if="detail.twoTypeActive ==0" text="全部" :hairline="true"></u-divider>
			</view>

			<scroll-view scroll-x="true" v-if="detail.twoTypeActive != 0">
				<view class="class">

					<view class="classItem" @click="onactive(index)" :class="detail.active == index ?'classactive':''"
						v-for="(item,index) in detail.tablist" :key="index">
						{{item.name}}
					</view>
				</view>
			</scroll-view>


			<view class="goodslist">
				<view class="goodslistItem" v-for="(item,index) in dataList" :key="index" @click="topage(item)">
					<image class="goodslistItemimg" :src="item.design_image" mode=""></image>
					<view class="goodslistItemname xml32 xpb10">
						<view class="" v-if="nameShow !=0">
							{{item.name}}
						</view>
						<view class="" v-if="aliasShow !=0">
							库存：{{item.stock}}
						</view>
					</view>
				</view>


			</view>


		</view>

	</z-paging>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import searchs from '@/components/search/searchs.vue'
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		zgybindexfirst,
		indexsecond,
		indexlists,
		accesstypec,
		getcategory,
		accesslists
	} from '../../network/home.js'


	let detail = reactive({
		id: '',
		title: "",
		tablist: [],
		active: 0,

		twoTypeList: [],
		twoTypeActive: 0,

		typelist: [],
		typeActive: 0,
		img:''
	})


	let scrollTop = ref(0)
	onLoad((option) => {
		console.log(decodeURIComponent(option.img));

		detail.id = option.id
		detail.title = option.title
		detail.img = decodeURIComponent(option.img)
		uni.setNavigationBarTitle({
			title: option.title
		})

		getzgybindexfirst()

	})

	let nameShow = ref(0)
	let aliasShow = ref(0)
	accesslists().then(res => {
		nameShow.value = res.data.index_goodsname

		aliasShow.value = res.data.index_stock
	})


	const onTypeActive = (index) => {
		detail.typeActive = index

		paging.value.reload()
	}

	const ontwoTypeActive = async (index) => {
		detail.twoTypeActive = index
		detail.typeActive = 0
		await getindexsecond()
		paging.value.reload()
	}

	const onactive = (index) => {
		detail.active = index
		paging.value.reload()
	}




	//一级分类
	const getzgybindexfirst = () => {
		zgybindexfirst({
			id: detail.id
		}).then(res => {

			detail.twoTypeList = [{
				id: 0,
				name: ''
			}, ...res.data]

			getindexsecond()

		})
	}

	// 二级分类
	const getindexsecond = () => {
		indexsecond({
			id: detail.id,
			pid: detail.twoTypeList[detail.twoTypeActive].id
		}).then(res => {
			console.log(res);
			detail.tablist = [{
				id: 0,
				name: '全部'
			}, ...res.data]
		})
	}


	// getcategory().then(res => {
	// 	console.log(res);

	// 	detail.twoTypeList = [{
	// 		id: 0,
	// 		name: ''
	// 	}, ...res.data]
	// })

	accesstypec().then(res => {
		console.log(res);

		detail.typelist = res.data
	})

	// 获取列表
	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		indexlists({
			id: detail.id,
			first_id: detail.twoTypeList.length > 0 ? detail.twoTypeList[detail.twoTypeActive].id : 0,
			second_id: detail.tablist.length > 0 ? detail.tablist[detail.active].id : 0,
			typec_id: detail.typelist.length > 0 && detail.typeActive != 0 ? detail.typelist[detail.typeActive]
				.id : 0,
			page_no: pageNo,
			page_size: pageSize
		}).then(res => {
			paging.value.complete(res.data.lists);
		})
	}


	const topage = (data) => {
		uni.navigateTo({
			url: '/pages/index/goodsDetail?id=' + data.id
		})
	}




	// 获取列表
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.top {
		padding: 22rpx 30rpx 10rpx;
		background-color: #fff;
	}

	.tabs {
		margin-top: 34rpx;
	}

	.color {
		color: #fff !important;
	}

	.tabsItem {
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
	}
	
	.img {
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}

	.tabsItemicon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}

	.tabsItemnameActive {
		color: #000000;
	}


	.goods {


		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32rpx 20rpx;
	}

	.goodsItem .goodsImg {
		width: 335rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.goodsImg {
		filter: brightness(55%)
	}

	.goodsinfo {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.goodsTitle {
		font-weight: bold;
		font-size: 32rpx;
		color: #e2e2e2;

	}

	.goodsValue {
		font-weight: 400;
		font-size: 24rpx;
		color: #e2e2e2;
		margin-top: 19rpx;
	}

	.class {
		padding: 30rpx;
		display: flex;


	}

	.classItem {

		background: #EEEEEE;
		border-radius: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		padding: 12rpx 21rpx;
		flex-shrink: 0;
		margin-right: 20rpx;


	}

	.classactive {
		background: #000;
		border-radius: 10rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		padding: 12rpx 21rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.goodslist {
		padding: 31rpx;
		box-sizing: border-box;
		display: grid;
		gap: 20rpx 20rpx;

		grid-template-columns: repeat(2, 1fr);


	}

	.goodslistItem {
		width: 335rpx;
		height: 748rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.goodslistItemimg {
		width: 100%;
		height: 660rpx;
		background: #333;
		border-radius: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.goodslistItemname {
		font-size: 26rpx;
		color: #333333;
		// margin-top: 23rpx;
	}
</style>